<template>
  <div class="header-bar" :style="{ background: 'var(--header-bg)' }">
    <el-button type="text" @click="$emit('toggleCollapse')" class="icon-btn">
      <font-awesome-icon :icon="collapse ? 'angle-right' : 'angle-left'" />
    </el-button>

    <div class="header-title">社团管理系统</div>

  </div>
</template>

<script>
export default {
  name: 'HeaderBar',
  props: {
    collapse: Boolean,
    isDark: Boolean
  },
  data() {
    return { themeChecked: this.isDark }
  },
}
</script>

<style scoped>
.header-bar { display:flex; align-items:center; height:100%; padding:0 16px; justify-content:space-between; transition: background 0.3s;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}
.icon-btn { font-size:18px; }
.header-title { font-weight:600; }
.header-actions { display:flex; align-items:center; gap:12px; }
</style>
